<template>
	<view>
		<block v-if="user.type && user.type === 'img'">
			<view class="vip" @tap="toVip"><image :src="user.url" mode="widthFix"></image></view>
		</block>
		<block v-else>
			<view class="user-list">
				<view class="img-card">
					<view @tap="toUserInfo(user.id)"><image mode="widthFix" :src="user.userHeadUrl" lazy-Load></image></view>

					<view class="img-tag uni-flex">
						<view class="tag-left">{{ user.userCity }}</view>
						<view class="icon iconfont icon-dingwei">{{ user.distance + 'KM' }}</view>
					</view>
				</view>
				<view class="uni-flex user-info">
					<view>{{ user.userNickname }}</view>
					<view class="uni-flex">
						<view @tap="tipoff(user.id)" class="iconfont icon-jinggao"></view>
						<view @tap="follow(index)" class="icon iconfont" :class="[user.followStatus ? 'icon-xihuan' : 'icon-03']"></view>
					</view>
				</view>
				<view class="uni-flex user-tag">
					<view>{{ user.userAge + '岁' }}</view>
					<view v-if="user.userTags && user.userTags.length > 0">{{ ('.' + user.userTags) | reJoin('.') }}</view>
				</view>
				<view class="uni-flex user-album">
					<view v-if="user.hasPrivate" class="uni-flex">
						<view class="icon iconfont icon-hongbao1"></view>
						付费解锁
					</view>
					<view v-if="user.hasDestruction" class="uni-flex">
						<view class="icon iconfont icon-jiaohuan"></view>
						互换
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		user: Object,
		index: Number
	},
	data() {
		return {};
	},
	methods: {
		tipoff(userId) {
			if (userId) {
				uni.navigateTo({
					url: `../tipoff/tipoff?userId=${userId}`
				});
			}
		},
		toUserInfo(userId) {
			uni.navigateTo({
				url: `../user-info/user-info?userId=${userId}`
			});
		},
		toVip() {
			uni.navigateTo({
				url: '../vip/vip'
			});
		},
		follow(index) {
			this.$emit('follow', index);
		}
	},
	filters: {
		reJoin(val, separator) {
			if (val) {
				return val.split(',').join(separator);
			} else {
				return '';
			}
		}
	}
};
</script>

<style lang="less">
.vip {
	width: 340rpx;

	image {
		vertical-align: middle;
		box-shadow: 0 6rpx 12rpx 0 rgba(0, 0, 0, 0.15);
		border-radius: 20rpx;
		width: 100%;
	}
}

.user-list {
	width: 340rpx;
	box-shadow: 0 6rpx 12rpx 0 rgba(0, 0, 0, 0.15);
	border-radius: 20rpx;
	.img-card {
		position: relative;
		max-height: 500rpx;
		overflow: hidden;

		image {
			vertical-align: middle;
			width: 100%;
			border-radius: 18rpx;
		}
		.img-tag {
			position: absolute;
			bottom: 20rpx;
			width: 100%;
			justify-content: space-between;

			& > view {
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 8rpx;
				padding: 0 6rpx;
			}
			& > view:first-child {
				margin-left: 8rpx;
				background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
			}
			& > view:last-child {
				margin-right: 8rpx;
				background: #d9d9d9;
			}
		}
	}
	.user-info {
		justify-content: space-between;
		align-items: center;
		& > view:first-child {
			margin-left: 15rpx;
			color: #333333;
		}
		& > view:last-child {
			margin-right: 15rpx;
			align-items: center;
			& > view:first-child {
				margin-right: 15rpx;
				font-size: 30rpx;
				color: #ff7177;
			}
			& > view:last-child {
				color: #ff7177;
			}
			.icon-xihuan::before {
				font-size: 30rpx;
			}
		}
	}
	.user-tag {
		margin: 0 15rpx;
		color: #666666;
		view {
			font-size: 22rpx;
		}
	}

	.user-album {
		margin: 0 15rpx 0 15rpx;
		& > view {
			color: #ffffff;
			font-size: 20rpx;
			border-radius: 8rpx;
			padding: 0 6rpx;
			margin-bottom: 10rpx;
			view {
				font-size: 20rpx;
			}
		}
		& > view:first-child {
			background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
		}
		& > view:last-child {
			margin-left: 15rpx;
			background: linear-gradient(270deg, #ffa93d 0%, #ffcf60 100%);
		}
	}
}
</style>
